<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.red{
			color:red;
		}
	</style>
</head>
<body>
	<div ng-app="myApp">
		<div ng-controller="parentCtrl">
			<button ng-click="toggle()" ng-class="{red:isRed}" ng-style="{background:bgcolor}">toggle</button>
			<div ng-controller="myCtrl" ng-show="isRed">
				<input type="text" ng-model="msg">
				{{msg}}
				<div>{{counter}}</div>
				<button ng-click="doClick()">click</button>
				<a ng-href="{{url}}">link</a>
				<img ng-src="{{imgPath}}">
			</div>
			<ul>
				<li ng-repeat="x in datas">line:{{$index}} :{{x}},{{$first}}</li>
			</ul>
			<button ng-click="start()">start</button>
		</div>	
	</div>

	<div ng-app="myApp2" ng-controller="myCtrl2" id="app2">
		{{text}}
	</div>
</body>
<script type="text/javascript" src="lib/angularjs/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])

.controller('myCtrl', function($scope){
})

.controller('parentCtrl', function($scope,$interval){
	$scope.imgPath = 'http://docs.ngnice.com/img/AngularJS-small.png';
	$scope.url = 'baidu.com';
	$scope.isRed = false;
	$scope.bgcolor = 'white';
	$scope.toggle = function(){
		$scope.isRed = !$scope.isRed
	}
	$scope.counter = 1;
	$scope.msg = "aaa";
	$scope.doClick = function(){
		$scope.counter++;
	}
	$scope.datas = [1,2,3,4,5,6];

	$scope.start = function(){
		$interval(function(){
			$scope.counter++;				
			console.log($scope.counter);
		},1000);
	};
})

angular.module('myApp2', [])
angular.module('myApp2')

.controller('myCtrl2', ['$scope', function($scope){
	$scope.text= 'aaa'
}])

angular.bootstrap(document.getElementById('app2'), ['myApp2']);

</script>
</html>